<template>
    <span>
        <el-button v-bind="$attrs" @click="show">{{ $attrs.label }}</el-button>

        <el-dialog v-if="$attrs.subPageGroup.showDialog" v-bind="$attrs.subPageGroup"
         :title="$attrs.subPageGroup.label"
            v-model="dialogVisible" append-to-body :close-on-click-modal="false">
            <x-cmpnt-renders :cmpnts="$attrs.cmpnts" :data="{}"></x-cmpnt-renders>
            <template #footer v-if=$attrs.subPageGroup.showFooter>
                <span >
                  <el-button @click="hide">取消</el-button>
                  <el-button type="primary" @click="submit">提交</el-button>
                </span>
              </template>
        </el-dialog>
        <el-drawer v-if="!$attrs.subPageGroup.showDialog" v-model="drawer" v-bind="$attrs.subPageGroup"
            :withHeader="$attrs.subPageGroup.showHeader" :title="$attrs.subPageGroup.label"
            :size="$attrs.subPageGroup.width">
            <x-cmpnt-renders :cmpnts="$attrs.cmpnts" :data="{}"></x-cmpnt-renders>
        </el-drawer>
    </span>
</template>
<script setup lang="ts">
import _ from 'lodash'
import { onMounted, ref, useAttrs } from 'vue'
import $cmpnt from "xcore/cmpnt"
import $data,{ onSwapData,requestFormData } from "xcore/data"

const dialogVisible = ref(false)
const drawer = ref(false)
const attrs = useAttrs()
const show = () => {
    // 监听组件来获取pdata数据
    onSwapData((): any => {
        return _.clone((attrs.meta as any).pdata)
    })
    if (attrs.subPageGroup?.showDialog) {
        dialogVisible.value = true
        return
    }
    drawer.value = true
}
const hide = () => {
    dialogVisible.value = false
    drawer.value = false
}
const submit = () => {
    requestFormData((data) => {
        $data.provider.biz.submit(data).then(() => {
            hide()
        })
});
}

onMounted(() => {
    if (attrs.cmpnts && attrs.cmpnts.length == 0) {
        attrs.cmpnts.push($cmpnt.find("blank-page").clone())
    }
})


</script>